<template >
	<view>
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-blue" :isBack="false">
			<block slot="content">首页</block>
		</cu-custom>
		
		<image src="/static/home-bg.png" mode="scaleToFill" style="height: 300rpx;width: 100%;position: absolute;"></image>
		<view class="flex justify-center align-center">
			<image src="/static/indexLogo.png" mode="scaleToFill"
			style="height: 60rpx;width: 30%;position: absolute;margin-top: 120rpx;"></image>
		</view>
		
		
		
		<view class="flex justify-center align-center" style="margin-top: 35%;">
			<input @input="keyInput" class="shadow-blur solid bg-white radius" 
			style="height: 80rpx;width: 90%;padding-left: 30rpx;" type="text" value="" 
			placeholder="请输入公司名称"/>
			<text @tap="searchByKey" class='cuIcon-search text-gray' 
			style="z-index: 99;position: absolute;right: 60rpx;font-size: 40rpx;"></text>
		</view>
		
		<view style="margin-top: 10rpx;width: 100%;" class="padding">
			<view class="cu-card" style="padding: 0rpx;margin: 0rpx;">
				<view @tap="toDetail(item)" v-for="(item,index) in companyList" :key="index" 
				class="cu-item shadow " style="margin: 0rpx;padding: 20rpx;margin-top: 20rpx;">
					<view class="flex align-center">
						<view style="width: 22%;">
							<img class="border solid radius" mode="scaleToFill" :src="handleImg(item.logo)" alt=""
							style="width: 120rpx; height: 120rpx;">
						</view>
						<view class="flex" style="flex-direction: column;width: 68%;">
							<view class="text-bold" style="font-size: 30rpx;margin: 10rpx;">
								{{ item.company_name }}
							</view>
							<view class="text-gray" style="font-size: 25rpx;margin: 10rpx;">
								<text>
									{{ item.area || '' }}
								</text>
								<text v-if="item.classify">
									| {{ item.classify }}
								</text>
								<text v-if="item.members">
									| {{ item.members }}
								</text>
							</view>
							<view v-if="item.infos" class="text-gray" style="font-size: 25rpx;margin: 10rpx;">
								{{ item.infos }}条信息
							</view>
						</view>
						<view v-if="item.userstars && item.userstars != 0" class="rate">
							{{ item.userstars }}
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		onLoad() {
		},
		data() {
			return {
				loading: false,
				companyList: [],
				page: 1
			}
		},
		watch: {
			loading(newValue, oldValue) {
				if(newValue){
					uni.showLoading({
						title: '加载中'
					});
				}else{
					uni.hideLoading();
				}
			}
		},
		onReachBottom(){
			this.page += 1
			this.search()
		},
		methods: {
			toDetail(item){
				uni.navigateTo({
					url: '../detail/detail?id=' + item.id
				})
			},
			handleImg(img){
				return this.$api.baseUrl + img
			},
			keyInput(e){
				this.key = e.detail.value
			},
			searchByKey(){
				this.page = 1
				this.search()
			},
			async search(){
				this.loading = true
				let res = await this.$api.queryCompany({
					key: this.$util.getKey(),
					uid: this.$util.getUid(),
					searchKey: this.key ? this.key : '',
					page: this.page
				})
				this.loading = false
				if(res && res.data && res.data.data){
					if(this.page == 1){
						this.companyList = res.data.data.data
					}else{
						this.companyList = this.companyList.concat(res.data.data.data)
					}
				}
			}
		}
	}
</script>

<style>
	
</style>
